<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>21. 类式组件中的构造器和props</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="app1"></div>
    <div id="app2"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom 用于支持 react 操作 dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入 label，用于将 jsx 转化为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入 prop-types，用于对于组件标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <!-- 此处必须写 text/babel -->
    <script type="text/babel">

        class Boy extends React.Component {
            // 编写构造器
            constructor(props) {
                super(props)
                console.log(props)
            }

            // 对标签属性进行类型、必要性限制
            static propTypes = {
                // name: React.PropTypes.string
                name: PropTypes.string.isRequired,  // 限制name必传且为字符串
                sex: PropTypes.string,   // 限制性别为字符串
                age: PropTypes.number,   // 限制年龄为数字
                speak: PropTypes.func    // 限制 speak 为方法
            }
            // 对标签属性默认值设置
            static defaultProps = {
                sex: '男',  // sex 不传入，则设置默认值为 未知
                age: 4  // age 不传入，则设置默认值为 0
            }

            render() {
                // 首先注意，props是只读的，不允许任何的修改操作！！
                let { name, age, sex } = this.props
                // this.props.name = '王俊宇' // 此行代码报错，因为只读，不能修改，改不了
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age}</li>
                    </ul>
                )
            }
        }

        ReactDOM.render(<Boy name="我是ed." />, document.getElementById('app1'))


        /**
         * 通常情况下，React 中，构造函数仅用于一下两种情况：
         *  通过给 this.state 赋值对象来初始化内部 state
         *  为时间处理函数绑定实例
         * 
         * 在 React 组件挂载之前，回调用他的构造函数，在为 React.Component 子类实现构造函数时，应在其他语句之前调用 super(props)。
         * 否则， this.props 在构造函数中可能出现没定义的 bug。
        */

    </script>

</body>

</html>